
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    
<div class="archive_info">
<h1>CSS 计数器
</h1><p>
CSS 计数器通过一个变量来设置，根据规则递增变量。</p>
<hr/>
<h2>使用计数器自动编号</h2>
<p>CSS 计数器根据规则来递增变量。</p>
<p>CSS 计数器使用到以下几个属性：</p>
<ul>
<li><code>counter-reset</code> - 创建或者重置计数器</li>
<li><code>counter-increment</code> - 递增变量</li>
<li><code>content</code> - 插入生成的内容</li>
<li><code>counter()</code> 或 <code>counters()</code> 函数 - 将计数器的值添加到元素</li>
</ul>
<p>要使用 CSS 计数器，得先用 counter-reset 创建：</p>
<p>以下实例在页面创建一个计数器 (在 body 选择器中)，每个 &lt;h2&gt; 元素的计数值都会递增，并在每个 &lt;h2&gt; 元素前添加 "Section &lt;<em>计数值</em>&gt;:"</p>
<div class="example">
<h2 class="example_head">CSS 实例</h2>
<div class="example_code">
<div class="hl-main"><span class="hl-identifier">body</span><span class="hl-code"> </span><span class="hl-brackets">{</span><span class="hl-code">
</span><span class="hl-reserved">counter-reset:</span><span class="hl-code"> </span><span class="hl-code">section</span><span class="hl-reserved"></span><span class="hl-code">;
</span><span class="hl-brackets">}</span><span class="hl-code">
</span><span class="hl-identifier">h2</span><span class="hl-code">:</span><span class="hl-special">:before</span><span class="hl-code"> </span><span class="hl-brackets">{</span><span class="hl-code">
</span><span class="hl-reserved">counter-increment:</span><span class="hl-code"> </span><span class="hl-code">section</span><span class="hl-reserved"></span><span class="hl-code">;
  </span><span class="hl-reserved">content:</span><span class="hl-code"> "</span><span class="hl-code">Section</span><span class="hl-code"> " </span><span class="hl-code">counter</span><span class="hl-code">(</span><span class="hl-code">section</span><span class="hl-code">) ": "</span><span class="hl-reserved"></span><span class="hl-code">;
</span><span class="hl-brackets">}</span></div>
</div>
<br/><a class="tryitbtn"  rel="noopener noreferrer" target="_blank">尝试一下 »</a>
</div><hr/>
<h2>嵌套计数器</h2>
<p>以下实例在页面创建一个计数器，在每一个 &lt;h1&gt; 元素前添加计数值 "Section &lt;<em>主标题计数值</em>&gt;.", 嵌套的计数值则放在 &lt;h2&gt; 元素的前面，内容为 "&lt;<em>主标题计数值</em>&gt;.&lt;<em>副标题计数值</em>&gt;":</p>
<div class="example">
<h2 class="example_head">CSS 实例</h2>
<div class="example_code">
<div class="hl-main"><span class="hl-identifier">body</span><span class="hl-code"> </span><span class="hl-brackets">{</span><span class="hl-code">
</span><span class="hl-reserved">counter-reset:</span><span class="hl-code"> </span><span class="hl-code">section</span><span class="hl-reserved"></span><span class="hl-code">;
</span><span class="hl-brackets">}</span><span class="hl-code">
</span><span class="hl-identifier">h1</span><span class="hl-code"> </span><span class="hl-brackets">{</span><span class="hl-code">
</span><span class="hl-reserved">counter-reset:</span><span class="hl-code"> </span><span class="hl-code">subsection</span><span class="hl-reserved"></span><span class="hl-code">;
</span><span class="hl-brackets">}</span><span class="hl-code">
</span><span class="hl-identifier">h1</span><span class="hl-code">:</span><span class="hl-special">:before</span><span class="hl-code"> </span><span class="hl-brackets">{</span><span class="hl-code">
</span><span class="hl-reserved">counter-increment:</span><span class="hl-code"> </span><span class="hl-code">section</span><span class="hl-reserved"></span><span class="hl-code">;
  </span><span class="hl-reserved">content:</span><span class="hl-code"> "</span><span class="hl-code">Section</span><span class="hl-code"> " </span><span class="hl-code">counter</span><span class="hl-code">(</span><span class="hl-code">section</span><span class="hl-code">) ". "</span><span class="hl-reserved"></span><span class="hl-code">;
</span><span class="hl-brackets">}</span><span class="hl-code">
</span><span class="hl-identifier">h2</span><span class="hl-code">:</span><span class="hl-special">:before</span><span class="hl-code"> </span><span class="hl-brackets">{</span><span class="hl-code">
</span><span class="hl-reserved">counter-increment:</span><span class="hl-code"> </span><span class="hl-code">subsection</span><span class="hl-reserved"></span><span class="hl-code">;
  </span><span class="hl-reserved">content:</span><span class="hl-code"> </span><span class="hl-code">counter</span><span class="hl-code">(</span><span class="hl-code">section</span><span class="hl-code">) "." </span><span class="hl-code">counter</span><span class="hl-code">(</span><span class="hl-code">subsection</span><span class="hl-code">) " "</span><span class="hl-reserved"></span><span class="hl-code">;
</span><span class="hl-brackets">}</span></div>
</div>
<br/><a class="tryitbtn"  rel="noopener noreferrer" target="_blank">尝试一下 »</a>
</div>
<p>计数器也可用于列表中，列表的子元素会自动创建。这里我们使用了
<code>counters()</code> 函数在不同的嵌套层级中插入字符串:</p>
<div class="example">
<h2 class="example_head">CSS 实例</h2>
<div class="example_code">
<div class="hl-main"><span class="hl-identifier">ol</span><span class="hl-code"> </span><span class="hl-brackets">{</span><span class="hl-code">
</span><span class="hl-reserved">counter-reset:</span><span class="hl-code"> </span><span class="hl-code">section</span><span class="hl-reserved"></span><span class="hl-code">;
  </span><span class="hl-reserved">list-style-type:</span><span class="hl-code"> </span><span class="hl-string">none</span><span class="hl-reserved"></span><span class="hl-code">;
</span><span class="hl-brackets">}</span><span class="hl-code">
</span><span class="hl-identifier">li</span><span class="hl-code">:</span><span class="hl-special">:before</span><span class="hl-code"> </span><span class="hl-brackets">{</span><span class="hl-code">
</span><span class="hl-reserved">counter-increment:</span><span class="hl-code"> </span><span class="hl-code">section</span><span class="hl-reserved"></span><span class="hl-code">;
  </span><span class="hl-reserved">content:</span><span class="hl-code"> </span><span class="hl-code">counters</span><span class="hl-code">(</span><span class="hl-code">section</span><span class="hl-code">,".") " "</span><span class="hl-reserved"></span><span class="hl-code">;
</span><span class="hl-brackets">}</span></div>
</div>
<br/><a class="tryitbtn"  rel="noopener noreferrer" target="_blank">尝试一下 »</a>
</div>
<hr/>
<h2> CSS 计数器属性</h2>
<table class="reference">
<tbody><tr>
<th style="width:20%">属性</th>
<th>描述</th>
</tr>
<tr>
<td><a  rel="noopener noreferrer" target="_blank">content</a></td>
<td>使用 ::before 和 ::after 伪元素来插入自动生成的内容</td>
</tr>
<tr>
<td><a  rel="noopener noreferrer" target="_blank">counter-increment</a></td>
<td>递增一个或多个值</td>
</tr>
<tr>
<td><a  rel="noopener noreferrer" target="_blank">counter-reset</a></td>
<td>创建或重置一个或多个计数器</td>
</tr>
</tbody></table> <div class="scroll-top"><a >返回顶部</a></div>
</div>

    </body>
    </html>
    